Hello and welcome to this lecture in this little we are going to create the style for the clock using
csx.
So this is what the clock looks like at my end the page.
By the time we're done it will look a little bit prettier.
All right so this is the hastier mail for our clock.
So are we going to use information from here to apply styling when you apply in styling weights here
says aesir says needs to know what select or these are called select or what element it needs to style
the way it does that is using the name of the element as a selector.
So for example if we are going to start the body we we will pick up the body tax or use the body has
The Selecter and then apply the property to properties what we want to do to the body and then the value
is what we have defined to do to the body.
So in this late chaubey apply in styling to the body that would be one selector would be applied as
silenter is deep here which we'll be using the idea which is this banner will be applied as thailin
to the Deve here using the idea of clock.
Ideas are unique and that's it and they will apply some of the Siling with some of other tax.
Okay so I've got some code here.
This is the body so the body here is the selector.
And when you write ncsa syntax once you've specified this selector which is the term you want a style
you need to enclose what you are going to do to it.
Inside this curlee racist that's opening.
And that's the close.
And in between is where you specify what you want to do to the body.
So here I have said I want this property the background colour for the body.
And I'm giving it a value.
So every CEO says Talon was have a property which is what you're trying to do to this electo and then
the value which is the actual result you want to show.
So I'm seeing here I want you to apply a background call or body using this value.
This is the hex value.
It's called X decimal of colours.
And there are different times so if you go to Google and just type it in your browser.
This is a website I use quite a lot.
It's called kolok DASH headstock cam and it gives you various hex values.
So if you're not sure where the actual names of the colours are you can use their hex value the call
X a decimal values.
Okay.
So feel free to look true and use whichever one you want for your own projects.
All right.
I've got a chunk of code here that I have used to apply thailin to the clock.
Dave any way you see the hash tag here it means you are looking at it Dave.
So again the format is the same.
You identify these select in discos.
Is this Deve here called clock where you write and indeed make sure the name does not separate from
the hash tag.
Must be very close.
If not it may not work.
So that's the idea there.
The caller specified the collar.
Anyway you see the hash tag by the values means views x values x decimal values here all right so again
the collar I want the kolob the clock to be that the font size to be this background to be base the
padding padding refers to the space inside while margin refers to this pin to the space outside elements.
This is a with specify that with those Well it bring that up a bit.
Then the font family have assigned Helvetica.
Let me put the font here.
It's always good too when you define a font to have more than one just in case the first one is not
available on the computer that is viewing that serial is quite popular and failed to answer.
Most computers should have that installed.
So always good to have a main font and then a substitute text to line.
I've said I want any text that is used with a clock that it detects the clock will display I want it
to be centred.
That's what all this means.
So feel free to play around with these values you don't have to use mine just use whichever one suits
you but play around with them so that you can see how the beauty of this mail and CSA is that you can
see the result of what you do straight away so if you don't like it you can change it.
Or the padding here use or be an M.
You can also use pixels so you don't have to use them.
All right have added some more chunk of code here from line 14 to twenty eight.
So again this is another idea here too.
For the banner.
This will be the heading for the clock.
And again these are these styling the stylin is the same.
Once you get used to see.
The process is the same.
Again this is the ones in blue here are those are the propertys and then these added value so you separate
the properties from the value with a call on it.
Okay so Lagu that's a colo daskal I want to use font size.
That's the size of the text followed by Now I've set it to 50 pixels again.
Play around with those values and see what you like.
17 lines 17 text to line and want the text to be centred.
Line 8 in the background column I have given it this padding refers to displays inside the element of.
Apply this.
Use e m.
You can also use pixels if you want.
By all means play around where the values and see what suits you.
You can see the results straight away in your browser so if you don't like a voucher you can change
it.
They will have made it 80 percent.
This is 80 percent of the parent container.
So you can use again.
You can use percent or you can use pixels.
Just play around where you use percent tool zoom did percentage from the parent container of that element
line 21 again margin whatever the margin is set to auto.
A tool just or the four sides send it will.
I just them and centre it automatically.
I've also used 10 percent here and then there of value.
So when you apply in margins and padding there are for --.
So you've got the top right bottom hand left.
Thus the ordering which is applied the way I tend to remember it is by using the word trouble and taking
out the vals which are the cause and that will leave you with t top.
Ah right be for bottom left.
That's how I remember it.
This is text transformation.
Upper case it means the test should be in upper case.
Spann basically is used China to test to get that to appear as one.
And I've said to margin as same from the left.
I want it to shift 175 pixels so that's set for the style in 4 o'clock.
Ah just save that if we view that.
Just show a few things.
It will mods display the clock because the javascript has not been applied.
Javascript is what we all need to display a clock.
So this is why the clock looks like.
If I refresh that you should see what it looks like now so this is what it looks like after the styling.
So by the time we apply the javascript The clock will be displayed inside as black.
Here showing but minutes and seconds.
So sit for this picture on the C Ss.
Thank you so much for watching.
Bye for now.